import s from "./Result.module.scss";
import { useGetWeatherByCityQuery } from "../../api/weather";
import { Loader } from "../UI/loader";
import { useSelector } from "react-redux";
import Slider from "../UI/Slider/Slider";
import { toUniqueDateArray } from "../../data/helpers";

export const Result = () => {
  const city = useSelector((state) => state.weather.currentCity);
  const { data, isError, isLoading } = useGetWeatherByCityQuery(city);

  return (
    <div className={s.result}>
      {isLoading ? (
        <Loader />
      ) : data ? (
        <div>
          <h1 className={s.result__title}>
            Прогноз погоды в городе <span>{city}</span>:
          </h1>

          <Slider data={toUniqueDateArray(data)} />
        </div>
      ) : (
        <div>Введите город</div>
      )}
    </div>
  );
};
